<template>
	<view>
		<u-popup :show="stat" :round="10" mode="center" @close="close" @open="open" :safeAreaInsetBottom="true">
			<view class="page">
				
			
			<view class="youhui">
				<image src="../../../static/youhui.png" mode=""></image>
			</view>
			<view class="head-warpper flex">
				<text>~您有优惠券待领取~</text>
			</view>
			<view class="content">
				<scroll-view scroll-y="true" style="height: 710rpx;" scroll-with-animation="true">
					
					<view class="box">
						<view class="box-s"v-for="(item,index) in couponList" @tap="lq(index,item)">
							<view class="box-l">
								<text style="font-weight: 700;">￥{{ item.money }}</text>
								<text>{{ item.name }}</text>
								
							</view>
							<view class="box-r">
								<text style="font-weight: 700; font-size: 34rpx;">满{{item.condition}}可用</text>
								<text style="font-size: 24rpx;">{{ item.end_time }}</text>
								
							</view>
							
						</view>
						
					</view>
					<view class="btn">
						<view class="btn-b" @click="qlq()">
							<text>一键领取</text>
						</view>
						
					</view>
					<!-- <view class="item flex" v-for="(item,index) in couponList" @tap="lq(index,item)">　
						<view class="left">
							<view class="num">
								
								<text  style="font-size: 37rpx;" v-if="item.type==1">{{ item.name }}</text>
								<text v-else>¥{{ item.money }}</text>
							</view>
							<view class="condition">
								<text v-if="item.type==1"></text>
								<text v-else>{{ item.name }}</text>
							</view>
						</view>
						<view class="right flex">
							<view class="circular">
								<view class="circular-item" v-for="(item,index) in ['','','','']">
								</view>
							</view>
							<view class="explain">
								<view class="title">
									店铺优惠券</view>
								<view class="details">有效期至{{ item.end_time }}</view>
							</view>
							
							<view class="receive_img" v-if="item.is_receive">
								<image src="../../../static/images/receive.png"></image>
							</view>
						</view>
					</view> -->
				</scroll-view>
			</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name: 'coupon',
		props: {
			couponList: {
				default: () => {
					return [];
				}
			},
			stat: {
				default: () => {
					return [];
				}
			}
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				this.stat = true
			},
			close() {
				this.stat = false
			},
			lq(i,item){
				if(item.is_receive){ return}
				let data = {
					id: item.id
				}
				uni.showLoading({title:'加载中'})
				this.$http.post('api/index/receive',data).then(res =>{
					uni.showToast({title:'领取成功',icon:'none'})
					this.couponList[i].is_receive==1
				})
			},
			qlq(){
				/* uni.showToast({title:"领取成功",icon:'none'}) */
				for (var i = 0; i < this.couponList.length; i++) {
					
					this.lq(i, this.couponList[i])
					
				}
				this.stat=false
				
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background:linear-gradient(to bottom,#fff2cf,#f9e4e9) ;
		border-radius: 20rpx;
		
		

		.head-warpper {
			width: 600rpx;
			justify-content: center;
			margin-top: 60rpx;
			font-size: 32rpx;
			color: #F35E33;
			font-weight: 500;

			.right {
				margin: auto 0;
				width: 10rpx;
				height: 35rpx;
				background: #31d081;
				border-radius: 5rpx;

			}

			.left {
				padding-left: 10rpx;
			}
		}

		.content {
			height: 700rpx;

			.item {
				width: 95%;
				margin: 20rpx auto;
				height: 180rpx;
				background: #EDF9F3;
				border-radius: 20rpx;

				.right {
					width: 65%;
					height: 180rpx;
					background: #31d081;
					border-radius: 0 20rpx 20rpx 0;
					float: right;
					position: relative;
					overflow: hidden;

					.circular {
						height: 180rpx;
						display: flex;
						margin-left: -16rpx;
						flex-direction: column;
						justify-content: space-around;

						.circular-item {
							height: 30rpx;
							width: 30rpx;
							border-radius: 50%;
							background: #EDF9F3;

						}
					}

					.explain {
						margin: auto 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							font-family: PingFangSC-Medium, PingFang SC;
							color: #FFFFFF;
						}

						.details {
							font-size: 28rpx;
							font-family: PingFang-SC-Regular, PingFang-SC;

							color: #FFFFFF;
						}

					}

					.receive {
						margin-left: 36rpx;
						padding: 10rpx 0 6rpx;
						align-self: center;
						color: rgb(24, 181, 103);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
						background-image: linear-gradient(124.4deg,
								rgb(255, 255, 255) 0%,
								rgb(255, 255, 255) -13.77%,
								rgb(189, 255, 222) 111.69%,
								rgb(189, 255, 222) 100%);
						box-shadow: 4rpx 6rpx 12rpx 0px rgb(1, 147, 74);
						border-radius: 27rpx;
						width: 108rpx;
						height: 56rpx;
						text-align: center;

					}

					.receive_img {
						width: 130rpx;


						image {
							width: 140rpx;
							height: 140rpx;
							position: absolute;
							bottom: -30rpx;
							right: -20rpx;
						}
					}
				}

				.left {
					width: 40%;
					text-align: center;
					margin: auto 0;

					.num {

						margin: auto;

						color: #31d081;

						text {
							font-family: Price-Bold;
							font-size: 70rpx;
							font-weight: bold;
						}

					}

					.condition {
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #505050;
					}
				}
			}
		}
	}
	.youhui{
		width: 300rpx;
		height: 230rpx;
		position: absolute;
		left: 160rpx;
		top:-170rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.box{
		width: 90%;
		margin-left: 30rpx;
		margin-top: 20rpx;
		height: 550rpx;
		overflow: scroll;
		/* background-color: #31d081; */
		.box-s{
			width: 100%;
			height: 150rpx;
			margin-top: 20rpx;
			background-image: url('../../../static/quan.png');
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			display: flex;
			justify-content: space-between;
			.box-l{
				width: 40%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				color: #F26F40;
				font-size: 30rpx;
				border-right:1rpx dotted #eee;
			}
			.box-r{
					width: 60%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					font-size: 30rpx;
			}
		}
	}
	.btn{
		width: 100%;
		height: 100rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn-b{
			width: 80%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fc8c4d;
			color: #fff;
			border-radius: 50rpx;
		}
		
	}
	
</style>
